<template>
  <div>
    <i
      @click="getdropdown"
      @mouseleave="clerdropdown(0)"      
      class="el-icon-more"
    ></i>
    <div>
      <ul
        @mouseleave="clerdropdown(1)"
        @mouseover="comdropdown"
        class="el-dropdown-menu el-popper"
        ref="dropdown"
        style="
          transform-origin: center top;
          z-index: 2025;
          position: absolute;
          left: 30px;
          display: none;
        "
      >
        <slot name="li">
          <li tabindex="-1" class="el-dropdown-menu__item">测试</li>
        </slot>

        <div x-arrow="" class="popper__arrow" style="left: 13.5px"></div>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: "",
    };
  },
  methods: {
    getdropdown(e) {
      let height = (this.$refs.dropdown.children.length - 1) * 36 + 30;
      let y = 904 - e.clientY;
      if (y < height) {
        this.$refs.dropdown.style.top = -(height - 15) + "px";
      } else {
        this.$refs.dropdown.style.top = "25px";
      }
      this.$refs.dropdown.style.display = "block";
    },
    clerdropdown(e) {
      if (e) {
        this.$refs.dropdown.style.display = "none";
      } else {
        this.timer = setTimeout(() => {
          this.$refs.dropdown.style.display = "none";
        }, 500);
      }
    },

    comdropdown() {
      clearTimeout(this.timer);
      this.$refs.dropdown.style.display = "block";
    },
  },
};
</script>

<style>
</style>
